<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,viewport-fit=cover,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>尤迈桃李会</title>
    <script src="js/rem.js"></script>
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/jquery-weui.min.css">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/user.css">
    <link rel="stylesheet" href="css/ot-classroom-index.css">
    <link rel="stylesheet" href="css/ot-doctor-relevant.css">
    <link rel="stylesheet" href="css/ot-doctor-detail.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <script>(function () { var _53code = document.createElement("script"); _53code.src = "https://tb.53kf.com/code/code/96d8f960b261e49515450f8953b044bc5/1"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(_53code, s); })();</script>
</head>

<body>
    <div class="pub_bar" title="尤迈桃李会" left="back"></div>
    <!--  -->
    <div class="pub-container has-tabbar  bgwhite" id="main">
        <!-- 公共部分 - header -->
        <header class="pub-header">
            <div class="header-box">
                <input type="text" class="search" placeholder="">
                <a href="./ot-myClass.html">
                    <div class="footprint">足迹</div>
                </a>
                <a href="./ot-signIn.html">
                    <div class="sign-in">签到</div>
                </a>
            </div>
        </header>
        <!--  -->
        <ul class="main-titles" id="selectLevel">
            <li class="oneLevel">一级科室</li>
            <li class="twoLevel">二级科室</li>
            <li class="disease">疾病</li>
            <li class="doctor">专家</li>
        </ul>
        <!-- 全部课程 / 短视频/片花 -->
        <div class="hot-course space-border">
            <div class="hxl_tabs">
                <div class="tabs_item active"><a href="./ot-curriculum-index.html">全部课程</a></div>
                <div class="tabs_item">短视频</div>
            </div>
            <!-- 列表 -->
            <div class="relevant_listing">
                <div class="relevant_list relevant_list1" style="display: block;">
                </div>
                <div class="relevant_list relevant_list2">
                    <div class="main">
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                            </div>
                        </div>
                        <!-- <div class="doctorInfo_cont plr15">
                        </div> -->
                    </div>
                </div>
            </div>
            <!-- 医生相关 - 开始听课 -->
            <div class="hxl_tabs space-border">
                <div class="tabs_item active">医生相关</div>
                <div class="tabs_item">开始听课</div>
            </div>
            <!-- 列表 -->
            <div class="relevant_listing">
                <div class="relevant_list relevant_relevant relevant_list3" style="display: block;">
                    <div class="pub_small_header plr15">
                        <a href="#">
                            <div class="title">精彩瞬间</div>
                            <div class="right">共有<span></span>节系列课程<img src="./image/hxl/hxl-right.png" alt=""></div>
                        </a>
                    </div>
                </div>
                <div class="relevant_list relevant_listen relevant_list4">
                </div>
            </div>
            <div class="weui-loadmore loadMore">
                <i class="weui-loading"></i>
                <span class="weui-loadmore__tips">正在加载</span>
            </div>
            <div class="weui-loadmore weui-loadmore_line hide noMore">
                <span class="weui-loadmore__tips">没有更多数据了</span>
            </div>
            <!-- 评论 -->
            <div class="comment_cont">
                <div class="comment_title">
                    <p><span></span>条评论</p>
                    <img class="comment_close" src="./image/bar-close.png" alt="">
                </div>
                <div class="comment_listing">
                    <div class="comment_list">
                    </div>
                    <div class="weui-loadmore loadMore">
                        <i class="weui-loading"></i>
                        <span class="weui-loadmore__tips">正在加载</span>
                    </div>
                    <div class="weui-loadmore weui-loadmore_line noMore hide">
                        <span class="weui-loadmore__tips">没有更多数据了</span>
                    </div>
                </div>
                <div class="mycomment">
                    <div class="mycomment_cont">
                        <div class="mycomment_head"><img src="" alt=""></div>
                        <div class="mycomment_msg"><input id="mycomment_msg" type="text" placeholder="请输入评论……"></div>
                    </div>
                    <div class="mycomment_send">发送</div>
                </div>
            </div>
        </div>
        <!-- 公共footer -->
        <div class="pub-footer">
            <ul class="tabs">
                <li class="tab-classroom"><a href="./ot-classroom-index.html">首页</a></li>
                <li class="tab-doctor"><a href="./ot-doctor-index.html">名医</a></li>
                <li class="tab-curriculum active"><a href="./ot-curriculum-index.html">课程</a></li>
                <li class="tab-forum"><a href="./classroom-index.html">讲堂</a></li>
                <li class="tab-consultation"><a href="consultation-index.html">会诊</a></li>
                <li class="tab-user"><a href="user.html">我的</a></li>
            </ul>
        </div>
    </div>
    <script src="https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-h5-min.js"></script>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/jquery-weui.min.js"></script>
    <script src="js/md5.js"></script>
    <script src="js/swiper-4.5.3.min.js"></script>
    <script src="js/public.js"></script>
    <!-- 选择四级 -->
    <div class="user-choose bgwhite" id="areaModule" style="display: none;">
        <div class="search-box">
            <input type="text" class="search" placeholder="">
        </div>
        <ul class="main-titles">
            <li class="oneLevel">一级科室</li>
            <li class="twoLevel">二级科室</li>
            <li class="disease">疾病</li>
            <li class="doctor">专家</li>
        </ul>
        <ul class="main">
            <li class="area-item" id="depart1List"></li>
            <li class="area-item" id="depart2List"></li>
            <li class="area-item" id="diseaseList"></li>
            <li class="area-item" id="doctorList"></li>
        </ul>
        <div class="footer submit-box">
            <input class="pub-submit-btn" id="doctorConfirm" type="button" value="确定">
        </div>
    </div>
    <script>
        let status = getQueryString('status')
        let doctor = getQueryString('doctor') // 医生id
        let course = getQueryString('course') // 课程id
        let videoId // 短视频id
        var page = 0
        let pages = 0
        let pagess = 0

        let picker = {
            depart1: getQueryString('sortId').split('_')[0],
            depart2: getQueryString('sortId').split('_')[1],
            disease: getQueryString('sortId').split('_')[2],
            doctor: getQueryString('sortId').split('_')[3],
            depart1_index: getQueryString('sortIndex').split('_')[0],
            depart2_index: getQueryString('sortIndex').split('_')[1],
            disease_index: getQueryString('sortIndex').split('_')[2],
            doctor_index: getQueryString('sortIndex').split('_')[3],
        }

        $(".hxl_tabs").eq(0).find('.tabs_item').eq(status).addClass('active').siblings().removeClass("active")
        $(".relevant_listing").eq(0).find('.relevant_list').eq(status).show().siblings().hide()

        // 选择科室四级
        $('#selectLevel').click(function () {
            $('#main').hide();
            $('#areaModule').show();
        })

        // 搜索结果
        $(document).on('keyup', '.search', function (event) {
            if (event.keyCode == 13) {
                $('.search').val($(this).val())
                $('#main').show();
                $('#areaModule').hide();
            }
        })

        // 获取联动数据
        gethttp('/ld/courses', {
            loading: true,
            data: {
                type: 'c'
            },
            success: function (res) {
                depart1Data = res.data.depart1
                depart2Data = res.data.depart2
                diseaseData = res.data.disease
                doctorData = res.data.doctor
                depart1Data.unshift({
                    id: '',
                    name: '全部',
                    parentId: 0
                })
                depart2Data.unshift({
                    id: '',
                    name: '全部',
                    parentId: 0
                })
                diseaseData.unshift({
                    id: '',
                    name: '全部',
                    parentId: 0
                })
                doctorData.unshift({
                    id: '',
                    name: '全部',
                    parentId: 0
                })

                $('#depart1List').html(getListHtml(depart1Data, 'id', 'name', picker.depart1_index));

                updatedepart2(picker.depart2_index)
                updatedisease(picker.disease_index)
                updatedoctor(picker.doctor_index)
            }
        })

        // 获取对应的二级科室
        function updatedepart2(parentIndex) {
            let arr = []
            depart2Data.forEach(function (item, index) {
                if (item.parentId == depart1Data[parentIndex].id || item.parentId == 0) {
                    arr.push(item)
                }
            })
            $('#depart2List').html(getListHtml(arr, 'id', 'name', parentIndex));
        }
        // 获取对应的疾病
        function updatedisease(parentIndex) {
            let arr = []
            diseaseData.forEach(function (item, index) {
                if (item.departs && item.departs != []) {
                    item.departs.forEach(function (items, indexs) {
                        if (items == depart2Data[parentIndex].id) {
                            arr.push(item)
                        }
                    })
                }
                if (item.id == 0) {
                    arr.push(item)
                }
            })
            $('#diseaseList').html(getListHtml(arr, 'id', 'name', parentIndex));
        }
        // 获取对应的专家   
        function updatedoctor(parentIndex) {
            let arr = []
            doctorData.forEach(function (item, index) {
                if (item.diseases && item.diseases != []) {
                    item.diseases.forEach(function (items, indexs) {
                        if (items == diseaseData[parentIndex].id) {
                            arr.push(item)
                        }
                    })
                }
                if (item.id == 0) {
                    arr.push(item)
                }
            })
            $('#doctorList').html(getListHtml(arr, 'id', 'name', parentIndex));
        }

        // 选择省
        $('#depart1List').click(function (e) {
            var $selectEle = $(e.target);
            // if (!$selectEle.attr('data-code')) { return false }
            var index = $selectEle.index();
            changeSelected($selectEle);
            // 更新二级科室 疾病 医生
            updatedepart2(index);
            updatedisease(0);
            updatedoctor(0);
        })

        $('#depart2List').click(function (e) {
            var $selectEle = $(e.target);
            var index = $selectEle.index();
            changeSelected($selectEle);
            // 更新疾病 医生
            updatedisease(index);
            updatedoctor(0);
        })

        $('#diseaseList').click(function (e) {
            var $selectEle = $(e.target);
            var index = $selectEle.index();
            changeSelected($selectEle);
            // 更新医生
            updatedoctor(index);
        })

        $('#doctorList').click(function (e) {
            var $selectEle = $(e.target);
            var index = $selectEle.index();
            changeSelected($selectEle);
        })

        // 确认
        $('#doctorConfirm').click(function () {
            $('#areaModule').hide();
            $('#main').show();

            // html
            $('.oneLevel').html($('#depart1List').find('p.active').html())
            $('.twoLevel').html($('#depart2List').find('p.active').html())
            $('.disease').html($('#diseaseList').find('p.active').html())
            $('.doctor').html($('#doctorList').find('p.active').html())

            // id
            picker.depart1 = $('#depart1List').find('p.active').attr('data-code')
            picker.depart2 = $('#depart2List').find('p.active').attr('data-code')
            picker.disease = $('#diseaseList').find('p.active').attr('data-code')
            picker.doctor = $('#doctorList').find('p.active').attr('data-code')

            // 下标
            picker.depart1_index = $('#depart1List').find('p.active').index()
            picker.depart2_index = $('#depart2List').find('p.active').index()
            picker.disease_index = $('#diseaseList').find('p.active').index()
            picker.doctor_index = $('#doctorList').find('p.active').index()

            page = 0
            pages = 0
        })

        var mySwiper = new Swiper('.swiper-container', {
            init: false,
            on: {
                slideChangeTransitionEnd: function () {
                    let prev = this.activeIndex - 1
                    let next = this.activeIndex + 1
                    $('video').eq(prev).trigger('pause').addClass("pause")
                    $('video').eq(next).trigger('pause').addClass("pause")
                    $('video').eq(this.activeIndex).trigger('play').removeClass("pause")
                    console.log(prev, this.activeIndex, next)
                    videoId = $('.swiper-slide').eq(this.activeIndex).find('.thumbs').attr('data-id')
                    getComment(1)
                },
            },
        })

        $(document).on('click', '.alyStop', function () {
            let index = $(this).parents('.swiper-slide').index()
            let dom = '#players' + index
            console.log(dom, $(dom), index)
            if ($(dom).find('video').hasClass('pause')) {
                $(dom).find('video').trigger('play').removeClass("pause")
            } else {
                $(dom).find('video').trigger('pause').addClass("pause")
            }
        })

        // 获取阿里云id
        gethttp('/ld/videos?type=c:doctor', {
            data: {
                doctor: doctor,
                index: 0,
                user: getCookie('userId'),
                count: 10000,
            },
            success: function (res) {
                let list = res.data.list
                if (list.length > 0) {
                    videoId = list[0].id
                }

                list.forEach(function (item, index) {
                    let html = `<div class="swiper-slide">
                                        <div class="doctorInfo">
                                            <div class="alyVideos">
                                                <img class="poster" src="${list[index].coverUrl}" alt="">
                                                <div id="${'players' + index}"></div>
                                                <div class="play" data-videoId="${list[index].alyVideoId}" playdom="${'players' + index}" height="100%" skin="true"
                                                    stopScreen="true"><img src="./image/hxl/hxl-play.png" alt=""></div>
                                                <div class="alyStop"></div>
                                            </div>
                                        </div>
                                        <div class="doctorInfo_cont plr15">
                                        </div>
                                    </div>`
                    $('.swiper-wrapper').append(html)
                    mySwiper.init(); //现在才初始化
                    getDoctor(index, item)
                })
                getComment(1)
            }
        })

        // 获取短视频
        getVideos(1)
        function getVideos(type) {
            if (type) {
                loading = false
            }
            $(".loadMore").removeClass('hide')
            gethttp('/ld/videos?type=c', {
                data: {
                    doctor: doctor,
                    index: page * 10,
                    count: 10,
                    user: getCookie('userId'),
                },
                success: function (res) {
                    let doctors = res.data.doctor
                    let list = res.data.list
                    let arr = []
                    $('.pub_small_header .right span').html(doctors.courseCountUi)

                    list.forEach((item, index) => {
                        let html = `<a href="./ot-doctor-video.html?doctor=${item.doctor}&course=${item.course}">
                                        <div class="item space-border">
                                            <div class="item_img">
                                                <img src="${item.coverUrl}" alt="">
                                                <i class="pub-i-play"></i>
                                            </div>
                                            <div class="item_cont">
                                                <p class="text-cut-one">${item.name}</p>
                                                <div><img src="./image/hxl/hxl-doctor08.png" alt="">${item.likeCountUi}</div>
                                            </div>
                                        </div>
                                    </a>`
                        arr.push(html)
                    });

                    page == 0 ? $('.relevant_list3').html(arr) : $('.relevant_list3').append(arr)
                    if (list.length < 10) {
                        $(".noMore").removeClass('hide')
                        loading = true;
                    } else {
                        loading = false;
                    }
                    $(".loadMore").addClass('hide')
                }
            })
        }

        // 医生信息，评论数量，点赞数
        function getDoctor(index, item) {
            gethttp('/ld/doctor', {
                data: {
                    type: 'c',
                    user: getCookie('userId'),
                    id: doctor
                },
                success: function (res) {
                    let data = res.data.doctor
                    $('.doctorInfo_cont').eq(index).html(`<div class="doctorInfo_left">
                                                <div class="doctorInfo_text">
                                                    <p class="doctorInfo_p1">
                                                        <span>${data.name}</span>
                                                        <span>${data.competent.name}</span>
                                                    </p>
                                                    <div class="doctorInfo_p2 text-cut-three">${data.desciption}</div>
                                                    <div class="doctorInfo_btn">
                                                        <a href="./ot-doctor-relevant.html?doctor=${data.id}&type=0">
                                                            <div>医生相关 <img src="./image/hxl/hxl-doctor05.png" alt=""></div>
                                                        </a>
                                                        <a href="./ot-doctor-relevant.html?doctor=${data.id}&type=1">
                                                            <div class="active">开始听课 <img src="./image/hxl/hxl-doctor06.png" alt=""></div>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="doctorInfo_right">
                                                <div class="thumbs ${item.like ? 'active' : ''}" data-id="${item.id}">
                                                    <p>${item.likeCountUi}</p>
                                                </div>
                                                <div class="comment">
                                                    <p>${item.commentCountUi}</p>
                                                </div>
                                            </div>`)
                }
            })
        }

        // 视频点赞
        $(document).on('click', '.thumbs', function () {
            let that = $(this)
            posthttp('/video_like', {
                hasToken: true,
                data: {
                    type: 'c',
                    user: getCookie('userId'),
                    video: videoId
                },
                success: function (res) {
                    let likeCount = res.data.likeCount
                    if (res.data.like) {
                        that.addClass('active')
                    } else {
                        that.removeClass('active')
                    }
                    that.find('p').html(likeCount)
                }
            })
        })

        // 获取开始听课
        getCourses(1)
        function getCourses(type) {
            if (type) {
                loading = false
            }
            $(".loadMore").removeClass('hide')
            gethttp('/ld/courses?type=c:doctor', {
                data: {
                    doctor: doctor,
                    index: pages * 10,
                    count: 10,
                },
                success: function (res) {
                    let doctor = res.data.doctor
                    let list = res.data.list
                    let arr = []

                    list.forEach((item, index) => {
                        let html = `<a href="./ot-classroom-play.html?doctor=${item.doctor}?courseId=${item.id}">
                                        <div class="item space-border">
                                            <div class="item_img">
                                                <img src="${item.coverUrlUi}" alt="">
                                                <p>共${item.serieCount}系列</p>
                                            </div>
                                            <div class="item_cont">
                                                <p class="item_p1">${item.name}</p>
                                                <div class="item_msg">
                                                    <p>${item.createdAtUi}</p>
                                                    <div><img src="./image/hxl/hxl-doctor08.png" alt="">${item.likeCountUi}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>`
                        arr.push(html)
                    });

                    pages == 0 ? $('.relevant_list4').html(arr) : $('.relevant_list4').append(arr)
                    if (list.length < 10) {
                        $(".noMore").removeClass('hide')
                        loading = true;
                    } else {
                        loading = false;
                    }
                    $(".loadMore").addClass('hide')
                }
            })
        }

        // 获取留言
        function getComment(type) {
            if (type) {
                loading = false
            }
            $(".loadMore").removeClass('hide')
            gethttp('/lt/video_comment', {
                data: {
                    type: 'c',
                    user: getCookie('userId'),
                    video: videoId,
                    index: pagess * 10,
                    count: 10
                },
                success: function (res) {
                    let list = res.data.list
                    let arr = []
                    $(".comment_title span").html(res.data.allCount)

                    list.forEach((item, index) => {
                        let html = `<div class="comment_item">
                                        <div class="comment_head"><img src="${item.userHeadImageUrl ? item.userHeadImageUrl : avatar}" alt=""></div>
                                        <div class="comment_text">
                                            <p class="comment_name text-cut-one">${item.userName ? item.userName : '用户名称'}</p>
                                            <p class="comment_msg">${item.comment}</p>
                                        </div>
                                        <div class="comment_live ${item.like ? 'active' : ''}" data-id="${item.id}">${item.likeCount}</div>
                                    </div>`
                        arr.push(html)
                    });

                    pagess == 0 ? $('.comment_list').html(arr) : $('.comment_list').append(arr)
                    if (list.length < 10) {
                        $(".noMore").removeClass('hide')
                        loading = true;
                    } else {
                        loading = false;
                    }
                    $(".loadMore").addClass('hide')
                }
            })
        }

        // 评论点赞
        $(document).on('click', '.comment_live', function () {
            let that = $(this)
            let comment = $(this).attr('data-id')
            posthttp('/video_comment_like', {
                hasToken: true,
                data: {
                    type: 'c',
                    user: getCookie('userId'),
                    comment: comment,
                },
                success: function (res) {
                    let likeCount = res.data.likeCount
                    if (res.data.like) {
                        that.addClass('active')
                    } else {
                        that.removeClass('active')
                    }
                    that.html(likeCount)
                }
            })
        })

        // 发送评论
        $(document).on('click', '.mycomment_send', function () {
            let val = $('#mycomment_msg').val()
            console.log(val)
            if (!val) {
                toast("请输入内容");
                return false
            }
            posthttp('/video_comment', {
                hasToken: true,
                data: {
                    type: 'c',
                    user: getCookie('userId'),
                    comment: val,
                    video: videoId
                },
                success: function (res) {
                    if (res.code == '01') {
                        toast("评论成功");
                        $('#mycomment_msg').val('')
                        page = 0
                        loading = false
                        getComment()
                    }
                }
            })
        })


        // 初始化加载更多
        var loading = false
        $(document.body).infinite().on("infinite", function () {
            if (loading) return;
            loading = true;
            console.log(1)
            status == 0 ? page = Number(page) + 1 : pages = Number(pages) + 1
            status == 0 ? getVideos() : getCourses()
        });

    </script>
</body>

</html>